<template>
    <div class="upload-avatar">
        <el-upload
            action="https://img.tianzhongli.shop/api/index.php"
            accept="image/jpg,image/jpeg,image/png,image/webp,image/bmp"
            :show-file-list="false"
            :data="data"
            name="image"
            :on-success="handleAvatarSuccess"
            :before-upload="handleAvatarBefore"
        >
            <el-avatar
                v-if="imageUrl"
                :size="100"
                :src="imageUrl"
                v-loading="loading"
                :key="key"
            />
            <el-avatar
                v-else
                :size="100"
                src="https://img.tianzhongli.shop/i/2023/03/14/default.webp"
            />
            <aside id="mark">
                <el-icon style="font-size: 40px"><CameraFilled /></el-icon>
            </aside>
        </el-upload>
        <div class="el-upload__tip">
            点击头像修改，图片格式为jpg/jpeg/png/webp/bmp
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { userStore } from '@/stores/user'
import { updateUserInfo } from '@/apis/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
let key = ref(1)
const useUserStore = new userStore()
const loading = ref(false)
const imageUrl = computed(() => useUserStore.profile.avatar)
const data = {
    // 有效日期至2023/4/26
    token: '17b911242216928caf097abf8af9a1b5',
}
// 上传成功的回调
const handleAvatarSuccess = (response, uploadFile) => {
    if ((response.code = 200)) {
        // 头像上传成功之后，更新数据库用户信息，更新本地pinia用户信息，提示用户修改成功
        setTimeout(() => {
            updateUserInfo({
                id: useUserStore.profile.id,
                avatar: response.url,
            })
                .then(res => {
                    ElMessage.success('更换成功!')
                    loading.value = false
                    useUserStore.updateUser(res)
                })
                .catch(err => {
                    // token过期处理，让用户重新登录
                    if (
                        err.response.data.code == 0 &&
                        err.response.data.message == 'The token is expired.'
                    ) {
                        ElMessage.error('token失效，请重新登录')
                        useUserStore.setUser({})
                        router.push('/login')
                        return
                    }
                    ElMessage.error('更换失败!')
                })
        }, 2000)
    }
}
// 上传前的回调
const handleAvatarBefore = () => {
    loading.value = true
}
watch(imageUrl, () => {
    key.value = Math.random()
})
</script>

<style lang="scss" scoped>
.upload-avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    position: relative;
}
.el-upload__tip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20px;
}
#mark {
    opacity: 0;
    background-color: rgba(67, 66, 66, 0.407);
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: absolute;
    left: 433px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    &:hover {
        background-color: rgba(98, 97, 97, 0.407);
        opacity: 1;
    }
}
</style>
